<template>
  <div class="container">
    <div class="tr"> 
        <div class="btn" @click="changeLang('en')">{{ $t('login.langEn')}}</div>
        <div class="btn" @click="changeLang('zh')">{{ $t('login.langZh')}}</div>
      </div>
    <article class="login-block">
      <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="120px" size="default" @submit.native.prevent>
        <el-form-item :label="$t('login.userName')" prop="username" class="required">
          <el-input v-model="formData.username" type="text" clearable></el-input>
        </el-form-item>
        <el-form-item :label="$t('login.password')" prop="password" class="required">
          <el-input v-model="formData.password" type="password" clearable></el-input>
        </el-form-item>
      </el-form>
      <div class="form-group">
        <input class="form-control" type="button" :value="$t('login.loginBtn')" @click="submitForm"/>
      </div>
      <div class="form-group tool">
        <input class="form-control register" type="button" :value="$t('login.register')" @click="registBtn">
        <input class="form-control forget" type="button" :value="$t('login.forgot')" @click="forgetBtn">
      </div>
    </article>
  </div>
</template>
 
<script>
import axios from 'axios';
import i18n from '../locals'
import enLocale from 'element-plus/es/locale/lang/en'
import zhLocale from 'element-plus/es/locale/lang/zh-cn'
import {setUserName} from "../locals/util.js"

const {locale} = i18n.global;
export default {
  components: {},
  props: {},
  data() {
    return {
      formData: {
        username: "admin",
        password: "123456",
      },
      rules: {
        username: [{
          required: true,
          message: '字段值不可为空',
        }, {
          pattern: /^[^一-龥]+$/,
          trigger: ['blur', 'change'],
          message: '请输入6-20位字符'
        }],
        password: [{
          required: true,
          message: '字段值不可为空',
        }, {
          pattern: /^[^一-龥]+$/,
          trigger: ['blur', 'change'],
          message: '请输入6-20位字符'
        }],
      },
    }
  },
  methods: {
    submitForm() {
      this.$refs['vForm'].validate(valid => {
        if (!valid) return
        //TODO: 提交表单
        var that = this;
        window.https.post('api/queryUser',that.formData).then(res=>{
          if(res.data){
            console.info(JSON.stringify(res.data));
            console.info(res.data.obj);
            if(res.data.obj){
              that.$message.success("登录成功",res.data.message);
              that.dealLoginData(res.data.obj);
              let  userUuid ={userUuid:res.data.obj.userUuid}
              setUserName(userUuid)
              that.loginBtn();
             
            }else{
              that.$message.error(res.data.message);
            }
          }
        })
      })
    },
    resetForm() {
      this.$refs['vForm'].resetFields()
    },
    loginBtn: function () {
      this.$router.push("/index")
      var that = this;
      window.sessionStorage.setItem("userName", this.userName);
      this.$router.push("index/home")
    },
    registBtn:function(){
      this.$router.push("register")
    },
    changeLang:function(lang){
      locale.value = lang
      localStorage.setItem('lang', lang)
      if(lang ==='en'){
          this.locale =enLocale
      }else{ 
          this.locale =zhLocale
      }
    },
    //登录数据处理
    dealLoginData:function(obj){
      //处理权限
      var list = this.$per;
        list.splice(0,list.length);
      if(obj.authList){
        obj.authList.some(function(item){
          list.push(item);
        });
      }
      //处理昵称
      window.sessionStorage.removeItem("niceName");
      if(obj.niceName){
        window.sessionStorage.setItem("niceName",obj.niceName)
      }
    }

  }
}

</script>
 
<style lang="scss">
.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px !important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}
</style>
 
<style lang="scss" scoped>
div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #e1e2e3;
    }
  }
}



.label-left-align ::v-deep .el-form-item__label {
  text-align: left;
}

.label-center-align ::v-deep .el-form-item__label {
  text-align: center;
}

.label-right-align ::v-deep .el-form-item__label {
  text-align: right;
}



.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}
</style>
<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  /* background-color: aliceblue; */
}

.tr {
  width: 200px;
  flex-basis: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* background-color: beige; */
  align-items: center;
}

.second {
  background-color: aqua;
}

.tool {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.login-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 350px;
  height: 400px;
  border: 1px solid #000000;
}
.form-group{
  margin-bottom: 15px;
}
.form-control{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

</style>